<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">93,634</div>
                <v-chart :options="searchUserOption"/>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">198,782</div>
                <v-chart :options="searchUserOption"/>
              </div>
            </div>
          <div class="table-wrapper">
            <el-table :data="tableData">
              <el-table-column prop="rank" label="排名"/>
              <el-table-column prop="keyword" label="关键词"/>
              <el-table-column prop="count" label="总搜索量"/>
              <el-table-column prop="users" label="搜索用户数"/>
              <el-table-column prop="range" label="搜索占比"/>
            </el-table>
            <el-pagination
              layout="prev,pager,next"
              :total="100"
              :page-size="4"
              background
              @current-change="onPageChange"
            />
          </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>

        <template>
          <div class="chart-wrapper">
            <v-chart :options="categoryOptions"></v-chart>
          </div>
        </template>

      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
      data() {
        return {
            searchUserOption: {
                xAxis: { type: 'category', boundaryGap: false },
                yAxis: {
                    min: 0,
                    max: 300,
                    show:false
                },
                series: [{
                    type: 'line',
                    data: [ 100,150,200,250,200,150,100,50,100,150 ],
                    areaStyle: {
                        color: 'rgba(95,187,255,.5)'
                    },
                    lineStyle: {
                        color: 'rgba(95,187,255)'
                    },
                    itemStyle: {
                        opacity: 0
                    },
                    smooth: true
                }],
                grid: {
                    top: 0,bottom: 0,left: 0,right: 0
                },

            },
            searchNumberOption: {},
            tableData: [
                { id:1,rank:1,keyword:'北京',count:100,users:90,range:'90%' },
                { id:2,rank:2,keyword:'北京',count:100,users:90,range:'90%' },
                { id:3,rank:3,keyword:'北京',count:100,users:90,range:'90%' },
                { id:4,rank:4,keyword:'北京',count:100,users:90,range:'90%' }
            ],
            radioSelect: '品类',
            categoryOptions: {}
        }
      },
      methods: {
          onPageChange(page){
              console.log(page);
          },
          renderPieChart(){
              const mockData = [
                  { name: '粉面粥店 | 15.40%',legendname: '粉面粥店', value: 67, percent: '15.40%', itemStyle: {
                      color: '#e7e702'
                      } },
                  { name: '简餐便当 | 22.30%',legendname: '简餐便当', value: 97, percent: '22.30%',itemStyle: {
                      color: '#8d7fec'
                      } },
                  { name: '汉堡披萨 | 21.15%',legendname: '汉堡披萨', value: 92, percent: '21.15%', itemStyle: {
                      color: '#5085f2' // 手动指定块的颜色
                      } }
              ]
              this.categoryOptions = {
                  title: [{
                      text: '品类分布', textStyle : {
                          fontSize: 14, color: '#666'
                      },
                      left: 20, top:20
                  },
                      {
                          text: '累计订单量',
                          subtext: '320',
                          x: '34.5%', y: '42.5%',
                          textStyle: {
                              fontSize: 14,
                              color: '#999'
                          },
                          subtextStyle: {
                            fontSize: 28,
                            color: '#333'
                          },
                          textAlign: 'center'
                      }
                  ],
                  series: [{
                      name: '品类分布',
                      itemStyle: { // 每个 item 设置白色间隔
                          borderWidth: 4,
                          borderColor: '#fff'
                      },
                      type: 'pie',
                      data: mockData,
                      label: {// 饼图每个块的小短线对应的文本
                          normal: {
                              show:true,
                              position: 'outter',
                              formatter: function(params){
                                  //同时返回名称和占有的百分比
                                  // return `${params.data.legendname} | ${ params.data.percent }`
                                  return `${params.data.legendname}`
                              }
                          }
                      },
                      center: [ '35%','50%' ],// 饼图圆形的位置，也可以指定px位置
                      //
                      /*
                        饼图中空的设置，通过设置内部圆形的半径控制中空的面积
                        后面参数是比较父容器的宽高，取比较小的纸的长度的一半作为饼图的直径
                       */
                      radius: [ '45%','60%' ],
                      labelLine: { // 饼图的解释文本的连线，两个线段，分别是 length 和 length2，靠近饼图的是线段1
                          nomarl: {
                              length: 5,
                              length2: 3,
                              smooth: true
                          }
                      },
                      clockwise: true, // true按照顺时针的顺序，相反则是逆时针
                  }],
                  grid: {// 不设置的话图形会显示在很局促的一小块区域中，并且位置也不对
                      top: 0,bottom: 0, left: 0, right: 0
                  },
                  legend: {
                      type: 'scroll', orient: 'vertical', height: 250, left: '70%', top: 'middle',
                      textStyle: {
                          color: '#8c8c8c'
                      }
                  },
                  tooltip: {
                      trigger: 'item',// 鼠标悬停在 item 上时显示 tooltip
                      formatter: function(params) { //
                          const str = params.seriesName + '<br />' +
                            params.marker + params.data.legendname + '<br />' +
                            '数量：' + params.data.value + '<br />' +
                            '占比：' + params.data.percent + '%'
                          return str
                      }
                  }
              }
          }
      },
      mounted() {
          this.renderPieChart()
      }
  }
</script>

<style lang="scss" scoped>
  .bottom-view {
    display: flex;
    margin-top: 20px;

    .view {
      flex: 1;
      width: 50%;
      box-sizing: border-box;

      &:first-child {
        padding: 0 10px 0 0;
      }

      &:last-child {
        padding: 0 0 0 10px;
      }

      .title-wrapper {
        display: flex;
        align-items: center;
        height: 60px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        font-weight: 500;
        padding: 0 0 0 20px;

        .radio-wrapper {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 20px;
        }
      }
      .chart-wrapper {
        display: flex;
        flex-direction: column;
        height: 452px;

        .chart-inner {
          display: flex;
          padding: 0 10px;
          margin-top: 20px;

          .chart {
            flex: 1;
            padding: 0 10px;

            .chart-title {
              color: #999;
              font-size: 14px;
            }

            .chart-data {
              color: #333;
              font-size: 22px;
              font-weight: 500;
              letter-spacing: 2px;
            }
            .echarts {
              height: 50px;
            }
          }
        }
        .table-wrapper {
          flex: 1;
          margin-top: 20px;
          padding: 0 20px 20px;

          .el-pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
          }
        }
      }
    }
  }
</style>
